import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { urlParse } from '@/utils/utils';
import BatchUpload from '../../components/BatchUpload/Index';
import StepItem from '../../components/BatchUpload/StepItem';
import FileUpload from '../../components/BatchUpload/Upload';
import Finish from '../../components/BatchUpload/Finish';
import BatchImportInfo from './BatchImportInfo';

@connect(({ salaybatchcs, publicdata, loading }) => ({
  uploading: loading.effects['salaybatchcs/uploadFileWithProgress'],
  batchQuery: salaybatchcs.batchQuery,
  fileId: publicdata.downloadFile.fileId,
  fileName: publicdata.downloadFile.fileName,
  currentStep: salaybatchcs.currentStep,
  progressPercent: salaybatchcs.progressPercent,
  resultInfo: salaybatchcs.resultInfo,
  showProgress: salaybatchcs.showProgress,
}))
class Batch extends React.PureComponent {
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { wageFalg } = urlParse(location.search);
    dispatch({
      type: 'salaybatchcs/updateQuery',
      payload: { wageFalg },
    });
    dispatch({
      type: 'salaybatchcs/updateModelData',
      payload: {
        isGoBack: false,
      },
    });
    this.clearModel();
  }

  componentWillUnmount() {
    this.clearModel();
  }

  clearModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'salaybatchcs/updateModelData',
      payload: {
        currentStep: 0,
        progressPercent: 0,
        showProgress: false,
        batchQuery: {
          // 批量上传数据
          wageFalg: '2', // 导入类型	2、待发放。4、待报税、

          // 接单方待发放工资导入
          custId: undefined,
          custName: undefined,
          incmType: undefined,
          busiYm: undefined,
          wageDate: undefined,
          changeFlag: '2', // 是否变更发放日期
          wageReaSendDate: undefined,
          reaRsn: undefined,
        },
      },
    });
  };

  // 设置当前位置
  setCurrentstep = currentStep => {
    const { dispatch } = this.props;
    dispatch({
      type: 'salaybatchcs/updateModelData',
      payload: { currentStep },
    });
    if (!currentStep) {
      dispatch({
        type: 'salaybatchcs/updateModelData',
        payload: {
          currentStep: 0,
          progressPercent: 0,
          showProgress: false,
        },
      });
    }
  };

  // 下一步
  onNext = values => {
    const { dispatch, currentStep } = this.props;
    dispatch({
      type: 'salaybatchcs/getDownloadInfo',
      payload: {
        incmType: values.incmType,
      },
    });

    this.setCurrentstep(currentStep + 1);
  };

  // 上传文件：需要携带参数即传：batchQuery
  uploadFile = formData => {
    const {
      batchQuery: { custId, custName, incmType, busiYm, wageDate },
      dispatch,
    } = this.props;

    const uploadQuery = {
      custId,
      custName,
      incmType,
      busiYm,
      wageDate,
    };
    // 需要携带参数即传：batchQuery，不需要传参可省略
    Object.entries(uploadQuery).forEach(([key, value]) => {
      formData.append(key, value);
    });
    dispatch({
      type: 'salaybatchcs/uploadFileWithProgress',
      payload: { formData, type: 'import' },
    })
  };

  render() {
    const {
      fileId,
      fileName,
      uploading,
      batchQuery,
      location,
      dispatch,
      currentStep,
      showProgress,
      resultInfo,
      progressPercent,
    } = this.props;

    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <StepItem title="选择客户信息">
            <BatchImportInfo
              batchQuery={batchQuery}
              onNext={value => this.onNext(value)}
              location={location}
            />
          </StepItem>
          <FileUpload
            title="上传文件"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            downloadTempInfo={{
              // 下载模板信息
              params: { fileId, fileName },
              url: '/csApi/batchTask/downloadFile',
            }}
            uploadFile={this.uploadFile}
            uploading={uploading}
            // 展示进度条需要的数据

            progressPercent={progressPercent || 0}
            progressTitle="批量导入工资"
            progressVisible={showProgress}
            preStep={() => {
              this.setCurrentstep(currentStep - 1);
              dispatch({
                type: 'salaybatchcs/updateModelData',
                payload: {
                  isGoBack: true,
                },
              });
              router.push(`/salarymanage/protection/batchimport?wageFalg=${batchQuery.wageFalg}`);
            }}
          />
          <Finish title="完成" resultInfo={resultInfo} setCurrentstep={this.setCurrentstep} />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}

export default Batch;
